<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_components/chromeos/localized_link/localized_link.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="multidevice_browser_proxy.html">
<link rel="import" href="multidevice_constants.html">
<link rel="import" href="multidevice_screen_lock_subpage.html">
<link rel="import" href="../os_icons.html">
<link rel="import" href="../../settings_shared_css.html">

<dom-module id="settings-multidevice-permissions-setup-dialog">
  <template>
    <style include="cr-shared-style settings-shared">
      :host {
        --cr-dialog-font-family: 'Google Sans';
        --cr-dialog-title-font-size: 16px;
      }

      cr-dialog::part(dialog) {
        width: 512px;
      }

      div[slot='title'] {
        color: var(--cr-primary-text-color);
        flex-direction: column;
        font-family: 'Google Sans';
        font-size: 16px;
        font-weight: medium;
        height: auto;
        line-height: 24px;
        padding-bottom: 24px;
        padding-inline-end: 24px;
        padding-inline-start: 24px;
        padding-top: 24px;
      }

      #subtitle {
        color: var(--cr-secondary-text-color);
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: medium;
        line-height: 20px;
      }

      div[slot='body'] {
        display: flex;
        flex-direction: column;
        padding-inline-end: 24px;
        padding-inline-start: 24px;
      }

      div[slot='button-container'] {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 20px;
        padding-inline-end: 24px;
        padding-inline-start: 24px;
        padding-top: 40px;
      }

      #failure-icon {
        --iron-icon-fill-color: var(--cros-icon-color-alert);
        padding-bottom: 13px;
      }

      #feature-icon {
        --iron-icon-fill-color: var(--cros-icon-color-prominent);
        padding-bottom: 13px;
      }

      #instruction-icon {
        --iron-icon-fill-color: var(--cros-icon-color-secondary);
        height: 14px;
        width: 14px;
      }

      #button-detail {
        align-items: flex-end;
        justify-content: right;
      }

      #description {
        color: var(--cros-text-color-secondary);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      #start-setup-description {
        align-items: center;
        display: flex;
        flex-direction: row;
        height: auto;
        justify-content: center;
      }

      #feature-details-container {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        gap: 12px;
      }

      #half-container {
        flex: 1;
      }

      #instruction {
        align-items: center;
        color: var(--cros-text-color-secondary);
        display: flex;
        flex-direction: row;
        font-size: 9px;
        gap: 6px;
        justify-content: start;
        padding-top: 4px;
      }

      :host(:not([did-setup-attempt-fail_])) #description {
        /* Larger height to account for the lack of #failureIcon */
        height: 93px;
      }

      :host([did-setup-attempt-fail_]) #description {
        /* Smaller height to account for the presence of #failureIcon */
        height: 60px;
      }

      #illustration {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 200px;
        margin-bottom: 24px;
        margin-top: 24px;
        width: 100%;
      }

      :host(:not([has-started-setup-attempt_])) #illustration {
        background-image:
            url(chrome://os-settings/images/notification_access_setup.svg);
      }

      :host([is-setup-attempt-in-progress_]) #illustration {
        background-image:
            url(chrome://os-settings/images/notification_access_connecting.svg);
      }

      :host([did-setup-attempt-fail_]) #illustration {
        background-image:
            url(chrome://os-settings/images/notification_access_error.svg);
      }

      :host([has-completed-setup-successfully_]) #illustration {
        background-image:
            url(chrome://os-settings/images/notification_access_finished.svg);
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div id="dialogTitle" slot="title">
        <template is="dom-if" if="[[didSetupAttemptFail_]]" restamp>
          <iron-icon id="failure-icon" icon="os-settings:failure-alert">
          </iron-icon>
        </template>
        <div id="title">[[title_]]</div>
        <template is="dom-if" if="[[shouldShowScreenLockInstructions_(flowState_)]]" restamp>
          <div id="subtitle">
            $i18n{multideviceNotificationAccessSetupScreenLockSubtitle}
          </div>
        </template>
      </div>
      <div id="dialogBody" slot="body">
        <template is="dom-if" if="[[!hasStartedSetupAttempt_]]" restamp>
          <template is="dom-if" if="[[shouldShowScreenLockInstructions_(flowState_)]]" restamp>
            <settings-multidevice-screen-lock-subpage
                is-screen-lock-enabled="{{isScreenLockEnabled_}}"
                is-password-dialog-showing="{{isPasswordDialogShowing}}">
            </settings-multidevice-screen-lock-subpage>
          </template>
          <template is="dom-if" if="[[!shouldShowScreenLockInstructions_(flowState_)]]" restamp>
            <div id="start-setup-description">
              <div id="half-container">
                <div id="illustration"></div>
              </div>
              <div id="half-container">
                <div id="description">
                  <template is="dom-if" if="[[description_]]" restamp>
                    <div id="feature-details-container">
                      <iron-icon id="feature-icon"
                          icon="os-settings:multidevice-better-together-suite">
                      </iron-icon>
                      <localized-link localized-string="[[description_]]">
                      </localized-link>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </template>
        <template is="dom-if" if="[[hasStartedSetupAttempt_]]" restamp>
          <div id="illustration"></div>
          <template is="dom-if" if="[[description_]]" restamp>
            <localized-link localized-string="[[description_]]">
            </localized-link>
          </template>
        </template>
        <template is="dom-if" if="[[shouldShowSetupInstructionsSeparately_]]"
            restamp>
          <template is="dom-if" if="[[!shouldShowScreenLockInstructions_(flowState_)]]" restamp>
            <div id="instruction">
              <iron-icon id="instruction-icon" icon="os-settings:failure-alert">
              </iron-icon>
              $i18n{multideviceNotificationAccessSetupInstructions}
            </div>
          </template>
        </template>
      </div>
      <div id="buttonContainer" slot="button-container">
        <div id="half-container">
          <template is="dom-if" if="[[!hasStartedSetupAttempt_]]" restamp>
            <template is="dom-if" if="[[!shouldShowScreenLockInstructions_(flowState_)]]" restamp>
              <cr-button id="learnMore" on-click="onLearnMoreClicked_">
                $i18n{multideviceLearnMoreWithoutURL}
              </cr-button>
            </template>
          </template>
        </div>
        <div id="button-detail">
          <template is="dom-if" if="[[shouldShowCancelButton_(setupState_)]]"
              restamp>
            <cr-button id="cancelButton" class="cancel-button"
                on-click="onCancelClicked_">
              $i18n{cancel}
            </cr-button>
          </template>
          <template is="dom-if" if="[[hasCompletedSetupSuccessfully_]]" restamp>
            <cr-button id="doneButton" class="action-button"
                on-click="onDoneOrCloseButtonClicked_">
              $i18n{done}
            </cr-button>
          </template>
          <template is="dom-if" if="[[isNotificationAccessProhibited_]]"
              restamp>
            <cr-button id="closeButton" class="action-button"
                on-click="onDoneOrCloseButtonClicked_">
              $i18n{close}
            </cr-button>
          </template>
          <template is="dom-if" if="[[!hasStartedSetupAttempt_]]" restamp>
            <cr-button id="getStartedButton" class="action-button"
                on-click="nextPage_">
              $i18n{next}
            </cr-button>
          </template>
          <template is="dom-if" if="[[shouldShowTryAgainButton_(setupState_)]]"
              restamp>
            <cr-button id="tryAgainButton" class="action-button"
                on-click="nextPage_">
              $i18n{multideviceNotificationAccessSetupTryAgain}
            </cr-button>
          </template>
        </div>
      </div>
    </cr-dialog>
  </template>
  <script src="multidevice_permissions_setup_dialog.js"></script>
</dom-module>
